<template>
  <div>
    <!-- 新增单位 -->
    <el-dialog
      width="500px"
      custom-class="customWidth"
      center
      :before-close="closeDialog"
      title="新增"
      :close-on-click-modal="false"
      :visible.sync="addDialogFormVisible"
    >
      <el-form
        :model="addataForm"
        :rules="addataRule"
        ref="addataForm"
        @keyup.enter.native="addataFormSubmit()"
        label-width="80px"
      >
        <el-form-item label="省/市" prop="cityId" v-if="addataForm.unitType === 100">
          <el-col :span="15">
            <el-cascader
              v-model="addataForm.cityId"
              :options="cityoptions"
              size="mini"
              :props="{value:'value',label:'label'}"
            ></el-cascader>
          </el-col>
        </el-form-item>
        <el-form-item label="类型" prop="unitType">
          <el-col :span="15">
            <el-select
              v-model="addataForm.unitType"
              placeholder="请选择"
              style="width:100%"
              size="mini"
            >
              <el-option
                v-for="item in unitTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="名称" prop="unitName">
          <el-col :span="15">
            <el-input v-model="addataForm.unitName" placeholder="名称" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="编号" prop="unitCode">
          <el-col :span="15">
            <el-input v-model="addataForm.unitCode" placeholder="编号" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="地址" prop="unitAddress">
          <el-col :span="15">
            <el-input v-model="addataForm.unitAddress" placeholder="地址" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系人" prop="linkMan">
          <el-col :span="15">
            <el-input v-model="addataForm.linkMan" placeholder="联系人" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNumber">
          <el-col :span="15">
            <el-input v-model="addataForm.phoneNumber" placeholder="联系电话" size="mini"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="传真" prop="fax">
          <el-col :span="15">
            <el-input v-model="addataForm.fax" placeholder="传真" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="网址" prop="website">
          <el-col :span="15">
            <el-input v-model="addataForm.website" placeholder="网址" size="mini"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addvisible()">取消</el-button>
        <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      width="500px"
      custom-class="customWidth"
      center
      title="编辑"
      :close-on-click-modal="false"
      :visible.sync="editDialogFormVisible"
    >
      <el-form
        :model="editdataForm"
        :rules="editdataRule"
        ref="editdataForm"
        @keyup.enter.native="editdataFormSubmit()"
        label-width="80px"
      >
        <el-form-item label="省/市" prop="cityId" v-if="addataForm.unitType === 100">
          <el-col :span="15">
            <el-cascader
              v-model="editdataForm.cityId"
              :options="cityoptions"
              size="mini"
              :props="{value:'value',label:'label'}"
            ></el-cascader>
          </el-col>
        </el-form-item>
        <el-form-item label="类型" prop="unitType">
          <el-col :span="15">
            <el-select
              v-model="addataForm.unitType"
              placeholder="请选择"
              style="width:100%"
              size="mini"
              disabled="disabled"
            >
              <el-option
                v-for="item in unitTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="名称" prop="unitName">
          <el-col :span="15">
            <el-input v-model="editdataForm.unitName" placeholder="名称" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="编号" prop="unitCode">
          <el-col :span="15">
            <el-input v-model="editdataForm.unitCode" placeholder="单位编号" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="地址" prop="unitAddress">
          <el-col :span="15">
            <el-input v-model="editdataForm.unitAddress" placeholder="地址" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系人" prop="linkMan">
          <el-col :span="15">
            <el-input v-model="editdataForm.linkMan" placeholder="联系人" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNumber">
          <el-col :span="15">
            <el-input v-model="editdataForm.phoneNumber" placeholder="联系电话" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="传真" prop="fax">
          <el-col :span="15">
            <el-input v-model="editdataForm.fax" placeholder="传真" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="网址" prop="website">
          <el-col :span="15">
            <el-input v-model="editdataForm.website" placeholder="网址" size="mini"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editvisible()">取消</el-button>
        <el-button type="primary" @click="editdataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        // 通过callback传递错误信息
        callback()
      } else {
        let emailReg = /^1[3456789]\d{9}$/
        if (!emailReg.test(value)) {
          callback(new Error('请输入正确的手机号码格式！'))
        } else {
          // 没有错误了就直接调用callback
          callback()
        }
      }
    }
    return {
      addDialogFormVisible: false,
      editDialogFormVisible: false,
      unitTypeList: [],
      addataForm: {
        unitName: '',
        unitCode: '',
        unitAddress: '',
        phoneNumber: '',
        linkMan: '',
        fax: '',
        website: '',
        unitType: 2,
        // 省市
        cityId: []
      },
      editdataForm: {
        unitName: '',
        unitCode: '',
        unitAddress: '',
        phoneNumber: '',
        linkMan: '',
        fax: '',
        website: '',
        unitGuid: '',
        // 省市
        cityId: []
      },
      addataRule: {
        phoneNumber: [{ validator: checkPhone, trigger: 'blur' }],
        unitName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        unitCode: [{ required: true, message: '请输入编号', trigger: 'blur' }]
      },
      editdataRule: {
        phoneNumber: [{ validator: checkPhone, trigger: 'blur' }],
        unitName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        unitCode: [{ required: true, message: '请输入编号', trigger: 'blur' }]
      },
      // 获取城市信息
      cityoptions: []
    }
  },
  created() {
    this.unitGuid = this.$store.state.user.changeschoolid
    this.unitType = this.$store.state.user.unitType
    if (this.isSystemUnit(this.unitType)) {
      this.unitTypeList = [{ label: '代理商单位', value: 50 }]
      this.addataForm.unitType = 50
    } else if (this.isAgentUnit(this.unitType)) {
      this.unitTypeList = [{ label: '学校', value: 100 }]
      this.addataForm.unitType = 100
    } else {
      this.$message.error('异常操作')
    }
    this.getcity()
  },
  props: ['userGuid'],
  methods: {
    getcity() {
      this.$http({
        url: this.$http.adornUrl('/manager/city-tree-search'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {},
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data.messageContent)
          this.cityoptions = data.messageContent || []
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    closeDialog(done) {
      this.$refs['addataForm'].resetFields()
      this.addataForm.cityId = []
      done()
    },
    addvisible() {
      this.addDialogFormVisible = false
      this.$refs['addataForm'].resetFields()
      this.addataForm.cityId = []
    },
    editvisible() {
      this.editDialogFormVisible = false
    },
    addinit() {
      this.addDialogFormVisible = true
    },
    eidtinit(row) {
      this.editDialogFormVisible = true
      this.editdataForm.cityId = []
      this.editdataForm.unitName = row.unitName
      this.editdataForm.unitCode = row.unitCode
      this.editdataForm.unitAddress = row.unitAddress
      this.editdataForm.phoneNumber = row.phoneNumber
      this.editdataForm.linkMan = row.linkMan
      this.editdataForm.fax = row.fax
      this.editdataForm.website = row.website
      this.editdataForm.unitGuid = row.unitGuid
      this.editdataForm.unitType = row.unitType
      this.editdataForm.cityId = [row.provincial, row.city]
      console.log(this.editdataForm.cityId)
    },
    addataFormSubmit() {
      if (
        this.addataForm.unitType == 100 &&
        this.addataForm.cityId.length == 0
      ) {
        this.$message({
          showClose: true,
          message: '请选择学校所属城市',
          type: 'warning'
        })
        return
      }
      this.$refs['addataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/manager/add-unit-info'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                deleteCycle: this.addataForm.deleteCycle,
                fax: this.addataForm.fax,
                linkMan: this.addataForm.linkMan,
                phoneNumber: this.addataForm.phoneNumber,
                unitAddress: this.addataForm.unitAddress,
                unitCode: this.addataForm.unitCode,
                unitName: this.addataForm.unitName,
                userGuid: this.userGuid,
                website: this.addataForm.website,
                deleteCycle: 0,
                unitType: this.addataForm.unitType,
                superiorGuid: this.unitGuid,
                provincial: this.addataForm.cityId[0],
                city: this.addataForm.cityId[1]
              },
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.$message({
                message: '新增成功',
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.addDialogFormVisible = false
                  this.$emit('refreshDataList')
                }
              })
              this.refreshDropDownList(this.addataForm.unitType)
              return
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        }
      })
    },
    editdataFormSubmit() {
      if (
        this.editdataForm.unitType == 100 &&
        this.editdataForm.cityId.length == 0
      ) {
        this.$message({
          showClose: true,
          message: '请选择学校所属城市',
          type: 'warning'
        })
        return
      }
      this.$refs['editdataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/manager/update-unit-info'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                deleteCycle: this.editdataForm.deleteCycle,
                fax: this.editdataForm.fax,
                linkMan: this.editdataForm.linkMan,
                phoneNumber: this.editdataForm.phoneNumber,
                unitAddress: this.editdataForm.unitAddress,
                unitCode: this.editdataForm.unitCode,
                unitName: this.editdataForm.unitName,
                userGuid: this.userGuid,
                unitGuid: this.editdataForm.unitGuid,
                website: this.editdataForm.website,
                deleteCycle: 0,
                provincial: this.editdataForm.cityId[0],
                city: this.editdataForm.cityId[1]
              },
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.$message({
                message: '编辑成功',
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.editDialogFormVisible = false
                  this.$emit('refreshDataList')
                }
              })
              this.refreshDropDownList(this.editdataForm.unitType)
              return
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        }
      })
    },

    // 更新下拉菜单
    refreshDropDownList(unitType) {
      if (unitType == 50) {
        // 编辑了代理商，则更新系统管理员下的代理商列表
        var temp = this.$store.state.user.sysUnitGuid
        this.$store.commit('user/updateSysUnitGuid', '') // 修改为 空值再修改回来，触发main-navbar.vue里面的watch是件
        setTimeout(() => {
          this.$store.commit('user/updateSysUnitGuid', temp) // 延时是为了让watch监听到
        }, 2000)
      } else if (unitType == 100) {
        // 编辑了学校，更新代理商的下拉列表
        var temp = this.$store.state.user.agentGuid
        this.$store.commit('user/updateAgentGuid', '') // 修改为 空值再修改回来，触发main-navbar.vue里面的watch是件
        setTimeout(() => {
          this.$store.commit('user/updateAgentGuid', temp) // 延时是为了让watch监听到
        }, 2000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px;
}
.el-dialog--center .el-dialog__body {
  padding-left: 100px;
}
</style>